<div id="viewer-container"></div>
<script>
  CTS.ready(() => {
    let gui = new dat.GUI()
    //初始化场景
    let viewer = new CTS.Viewer('viewer-container')
    viewer.skyboxs.addSkybox(2)
    let modeloader = new CTS.ModelLoder(viewer)
    viewer.camera.position.set(30, 70, 70) //设置相机位置
    //开始加载模型
    let model
    modeloader.loadModelToScene('resources/model/building.glb', _model => {
      model = _model
      model.setColorCool(params.color, params.opacity)
    })

    function update() {
      if (params.isCool) {
        let color = `rgb(${params.color[0].toFixed(0)},${params.color[1].toFixed(0)},${params.color[2].toFixed(0)})`
        model.setColorCool(color, params.opacity)
      } else {
        model.setCoolDefault()
      }
    }

    let params = {
      color: [255, 255, 255],
      opacity: 0.05,
      isCool: true
    }
    gui.add(params, 'isCool').name('是否透明材质').onChange(update)
    gui.addColor(params, 'color').name('模型颜色').onChange(update)
    gui.add(params, 'opacity', 0, 1).name('模型材质透明度').step(0.01).onChange(update)
  })
</script>
